<div class="container" id="app">
<form @submit.prevent="edit ? updatePost() : addPost()">
  <h2 class="pink-text" v-if="!edit">Add a New Post</h2>
  <h2 class="pink-text"v-else>Edit Post</h2>
      <div class="row">
        <div class="input-field col s12">
          <input id="title" type="text" class="validate" placeholder="Title" v-model="title">
          </div>
      </div>
    <div class="row">
      <div class="row">
        <div class="input-field col s12">
          <textarea id="body" class="materialize-textarea" placeholder="Body" v-model="body"></textarea>
        </div>
      </div>
    </div>
    <input type="submit" class="btn btn-primary btn-sm" value="Add Post" v-if="!edit">
    <input type="submit" class="btn btn-secondary btn-sm" value="Update Post" v-else>
</form>
<hr>
<h3 class="pink-text" v-if="posts.length > 0">My Posts</h3>
<h3 class="pink-text" v-else>You have no posts yet</h3>
<transition-group name="fade" mode="out-in">
  <div class="row" v-for="post in posts" :key="post.id">
    <div class="col s12">
      <div class="card">
        <div class="card-content">
          <span class="card-title">{{post.title}}</span>
          <p>{{post.body}}</p>
        </div>
        <div class="card-action">
          <a href="" @click.prevent="editPost(post.id)">Edit</a>
          <a href="" @click.prevent="deletePost(post.id)">Delete</a>
        </div>
      </div>
    </div>
  </div>
</transition-group>

</div>
      <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.js"></script>
<script>
new Vue({
    el: "#app",
    data: {
        post_id: "",
        title: "",
        body: "",
        user_id: <%= @conn.assigns[:user].id %>,
        posts: [],
        edit: false
    },
    methods:{
        editPost(id){
          this.edit = true;
          let post = this.posts.find(el => el.id == id)
          this.title = post.title;
          this.body = post.body;
          this.post_id = post.id;
        },
        addPost(){
            axios.post("/api/posts", {
              title: this.title,
              body: this.body,
              user_id: this.user_id, 
            })
            .then(res=>{
              console.log(res)
              this.title = ""
              this.body = ""
              this.getPosts()
            })
        },
        updatePost(){
          axios.put("/api/posts/" + this.post_id, {
            title: this.title,
            body: this.body,
            id: this.post_id
          })
          .then(res=>{
            console.log(res)
            this.edit = false;
            this.title = "";
            this.body = "";
            this.post_id = "";
            let post = this.posts.find(el => el.id == res.data.id);
            post.title = res.data.title;
            post.body = res.data.body;

          })
        },
        deletePost(id){
          if(confirm("Are you sure you want to delete this post?")){
            axios.delete("/api/posts/" + id)
            .then(res=>{
              console.log(res)
              let postIndex = this.posts.findIndex(el => el.id == id);
              this.posts.splice(postIndex, 1)
            })
          }
        },
        getPosts(){
          axios.get("/api/posts?user_id=" + this.user_id)
          .then(res=>{
            console.log(res)
            this.posts = res.data
          })
        }
    },
    created(){
      this.getPosts()
    }
})

</script>
<style>
.fade-enter{
  opacity: 0;
}
.fade-enter-active{
  transition: opacity 1s;
}
.fade-leave-active{
  transition: opacity 1s;
  opacity: 0;
}
</style>
